<template>
  <div class="scenic-list-wrapper">
    <!-- <v-header title="景区列表" ref="header"></v-header> -->
    <scroll ref="scroll"
      :data="scenicList"
      :listenScroll="true"
      :probe-type="3"
      :pullDownRefresh="true"
      :pullUpLoad="true"
      @pullingDown="onPullingDown"
      @pullingUp="onPullingUp">
      <ul class="scenic-list">
        <li v-for="item in scenicList" :key="item.id"
          @click="clickScenicItem(item.id)"
          v-lazy:backgroundImage="item.thumbUrl"
          :style="{width: 2 * itemHeight + 'px', height: itemHeight + 'px'}">
          <p>{{item.name}}</p>
        </li>
      </ul>
    </scroll>
    <ul class="scenic-bottom" :style="{paddingBottom: paddingBottom + 8 + 'px'}">
      <li @click="showSelectArea = true" :class="{selected: selectedArea.id !== ''}">
        <p>{{selectedArea.name}}</p>
        <i class="icon iconfont icon-down"></i>
      </li>
      <li @click="showSelectTag = true" :class="{selected: selectedTag.id !== ''}">
        <p>{{selectedTag.name}}</p>
        <i class="icon iconfont icon-down"></i>
      </li>
      <li @click="showSelectSort = true" :class="{selected: selectedSort.id !== ''}">
        <p>{{selectedSort.name}}</p>
        <i class="icon iconfont icon-down"></i>
      </li>
    </ul>

    <address-selector v-model="showSelectArea" @selectArea="(item) => { selectCondition(0, item) }"></address-selector>

    <div v-transfer-dom>
      <popup
        v-model="showSelectTag"
        position="bottom"
        width="100%"
        class="popup-wrapper">
        <ul class="tag-list" :style="{paddingBottom: paddingBottom + 'px'}">
          <li v-for="tag in tagList" :key="tag.id" @click="selectCondition(1, tag)" :class="{selected: tag.id === selectedTag.id}">{{tag.name}}</li>
          <li style="color: #999; text-align: center;" @click="clearTag">清空筛选</li>
        </ul>
      </popup>
    </div>

    <div v-transfer-dom>
      <popup
        v-model="showSelectSort"
        position="bottom"
        width="100%"
        class="popup-wrapper">
        <ul class="tag-list" :style="{paddingBottom: paddingBottom + 'px'}">
          <li v-for="sort in sortList" :key="sort.id" @click="selectCondition(2, sort)" :class="{selected: sort.id === selectedSort.id}">{{sort.name}}</li>
        </ul>
      </popup>
    </div>
  </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import Scroll from '@/components/scroll/scroll'
import AddressSelector from '@/components/address-selector/address-selector'
import { TransferDom, Popup } from 'vux'

import axios from '@/api/axiosApi'
import { isIphoneX } from '@/assets/js/brower'
import { handleBackMixin } from '@/assets/js/mixin'

export default {
  name: 'ScenicList',
  mixins: [handleBackMixin],
  data() {
    return {
      scenicList: [],
      pageNum: 1,
      showSelectArea: false,
      selectedArea: {
        id: '',
        name: '全部'
      },
      areaList: [],
      showSelectTag: false,
      selectedTag: {
        id: '',
        name: '筛选'
      },
      tagList: [],
      showSelectSort: false,
      selectedSort: {
        id: 1,
        name: '智能排序'
      },
      sortList: [
        {
          id: 1,
          name: '智能排序'
        },
        {
          id: 2,
          name: '销量排序',
          sortName: 'sale',
          sortType: 'DESC'
        },
        {
          id: 3,
          name: '离我最近',
          sortName: 'distance',
          sortType: 'DESC'
        }
      ],
      allDisabledBack: true,
      allPopupModels: ['showSelectArea', 'showSelectTag', 'showSelectSort']
    }
  },
  directives: {
    TransferDom
  },
  components: {
    VHeader,
    Scroll,
    AddressSelector,
    Popup
  },
  computed: {
    itemHeight () {
      return (window.innerWidth - 32) / 2
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      const scrollTop = vm.$store.getters.scrollTop
      if (vm.$refs.scroll && scrollTop.ScenicList) {
        vm.$refs.scroll.scrollTo(0, scrollTop.ScenicList)
      }
    })
  },
  beforeRouteLeave (to, from, next) {
    this.$store.commit('SET_SCROLL_TOP', {ScenicList: this.$refs.scroll.scroll.y})
    next()
  },
  created() {
    this.paddingBottom = 0
    if (isIphoneX()) {
      this.paddingBottom = 34
    }
    this._getScenicList()
    this._getHotTags()
  },
  mounted() {
    this.$refs.scroll.$el.style.height = window.innerHeight - 40 - (this.paddingBottom) + 'px'
  },
  methods: {
    _getScenicList() {
      axios.get(this, '/v1/scenic', {
        pageSize: 10,
        pageNum: this.pageNum,
        areaId: this.selectedArea.id,
        tagIds: this.selectedTag.id,
        sortName: this.selectedSort.sortName,
        sortType: this.selectedSort.sortType
      }, data => {
        if (data.length === 0) {
          if (this.pageNum > 1) {
            this.pageNum--
            if (this.$refs.scroll) {
              this.$refs.scroll.hiddenPullUpLoad()
            }
          } else {
            this.pageNum = 1
            this.scenicList = []
            if (this.$refs.scroll) {
              this.$refs.scroll.hiddenPullDown()
            }
          }
          return
        }
        if (this.pageNum <= 1) {
          this.scenicList = data
        } else {
          this.scenicList = this.scenicList.concat(data)
        }
      })
    },
    _getHotTags () {
      axios.get(this, `/v1/tag`, {
        type: 102,
        pageSize: 6
      }, (data) => {
        this.tagList = data
      })
    },
    onPullingDown() {
      this.pageNum = 1
      this._getScenicList()
    },
    onPullingUp() {
      this.pageNum++
      this._getScenicList()
    },
    clickScenicItem(id) {
      this.$router.push(`/scenic/${id}`)
    },
    selectCondition(type, item) {
      switch (type) {
        case 0:
          this.showSelectArea = false
          this.selectedArea = item
          break
        case 1:
          this.showSelectTag = false
          this.selectedTag = item
          break
        case 2:
          this.showSelectSort = false
          this.selectedSort = item
          break
      }
      this.pageNum = 0
      this._getScenicList()
    },
    clearTag() {
      this.showSelectTag = false
      this.selectedTag = {
        id: '',
        name: '筛选'
      }
      this._getScenicList()
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
@import '~@/assets/css/mixins.styl'

.selected
  color $color-theme !important
.scenic-list-wrapper
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background-color $color-background
  z-index 100
.scenic-list
  padding 16px 16px 8px 16px
  li
    height 150px
    margin-bottom 16px
    border-radius $border-radius-img
    overflow hidden
    background-position center
    background-size cover
    background-repeat no-repeat
    position relative
    p
      text-align center
      margin 0 auto
      width 70%
      font-size 18px
      color #ffffff
      position absolute
      line-height 1.4
      top 50%
      left 50%
      transform translate(-50%, -50%)
    &:last-child
      margin 0
.scenic-bottom
  display flex
  justify-content space-between
  border-top 1px solid #e2e2e2
  height 24px
  line-height 24px
  padding 8px 0
  background #ffffff
  li
    display flex
    justify-content center
    align-items center
    border-right .5px solid #e2e2e2
    font-size 15px
    color #666666
    width 33.33%
    p
      display inline-block
      max-width 100px
      no-wrap()
    i
      font-size 12px
      margin-left 4px
      color #999999
    &:last-child
      border-right none
.tag-list
  background #ffffff
  li
    border-bottom 0.5px solid #e2d2e2
    height 45px
    line-height 45px
    font-size 15px
    padding 0 16px
    color #333333
    &:last-child
      border-bottom none
</style>
